<div class="flex mx-auto w-full">

  <!-- Sidebar -->
  <aside class="w-1/6 bg-white text-black dark:text-white dark:bg-gray-800 p-4">
    <h2 class="text-xl font-semibold mb-4">Admin Dashboard</h2>
    <nav>
      <ul class="space-y-2">
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              Overview
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scroll"><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/></svg>
              Logs
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></svg>
              Accounts
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hard-drive"><line x1="22" x2="2" y1="12" y2="12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" x2="6.01" y1="16" y2="16"/><line x1="10" x2="10.01" y1="16" y2="16"/></svg>
              Storage
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cog"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M12 2v2"/><path d="M12 22v-2"/><path d="m17 20.66-1-1.73"/><path d="M11 10.27 7 3.34"/><path d="m20.66 17-1.73-1"/><path d="m3.34 7 1.73 1"/><path d="M14 12h8"/><path d="M2 12h2"/><path d="m20.66 7-1.73 1"/><path d="m3.34 17 1.73-1"/><path d="m17 3.34-1 1.73"/><path d="m11 13.73-4 6.93"/></svg>
              Settings
            </div>
          </a>
        </li>
      </ul>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 p-6 bg-gray-100 dark:bg-gray-900 dark:text-white">
    <!-- Dashboard Header -->
    <div class="mb-6">
      <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Overview</h1>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Regisered Users</h3>
        <p class="text-2xl font-bold text-red-400">1234</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Sessions</h3>
        <p class="text-2xl font-bold text-red-400">23456</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Lobbies</h3>
        <p class="text-2xl font-bold text-red-400">5432</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Voice Connections</h3>
        <p class="text-2xl font-bold text-red-400">1234</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Published Games</h3>
        <p class="text-2xl font-bold text-red-400">12</p>
      </div>
    </div>

    <!-- Recent Logs Table -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-white mb-4">System Event Log</h2>
      <table class="w-full text-left">
        <thead>
          <tr class="border-b">
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Timestamp</th>
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Class</th>
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Description</th>
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Session</td>
            <td class="px-4 py-2">Authenticate user 45678</td>
            <td class="px-4 py-2 text-green-600">Successful</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Signaling</td>
            <td class="px-4 py-2">Initialize message relay in game ID 1234</td>
            <td class="px-4 py-2 text-green-600">Successful</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Developer Registration</td>
            <td class="px-4 py-2">Register developer ID 34567</td>
            <td class="px-4 py-2 text-yellow-600">Awaiting Approval</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Game Submission</td>
            <td class="px-4 py-2">Developer ID 12345 submitted game ID 4567</td>
            <td class="px-4 py-2 text-yellow-600">Awaiting Approval</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Game Review</td>
            <td class="px-4 py-2">Developer ID 12345 game ID 3456</td>
            <td class="px-4 py-2 text-red-600">Denied</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Game Review</td>
            <td class="px-4 py-2">Developer ID 12345 game ID 1234</td>
            <td class="px-4 py-2 text-green-600">Approved</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>